<!-- 
   @Title: 首页界面
   @Description: 
   @MethodAuthor: Mimen-Y
   @Date: 2022-10-26 09:31:12
-->
<template>
  <view class="app">
    <view class="content_blank"></view>
    <view class="headerBox">
      <view class="header_scaner">
        <u-icon name="scan" color="#fff" size="32"></u-icon>
      </view>
      <view class="header_search"
        ><u-input
          prefixIcon="search"
          trim="true"
          A
          border="true"
          border-color="#fff"
          type="text"
          height="20"
          v-model="headerSearch"
          placeholder="搜索"
          placeholder-style="color:#fff;font-size:26rpx;"
      /></view>
      <view class="header_message">
        <u-icon name="chat" color="#fff" size="32"></u-icon>
        <!-- <text>消息</text> -->
      </view>
    </view>

    <view class="content_box">
      <view class="content_top">
        <view
          class="content_top_category"
          v-for="(item, index) in contentList"
          :key="index"
          :style="{ 'border-right': index == 3 || index == 7 ? 0 : '' }"
        >
          <image :src="'../../static/fontIma/' + item.icon"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>

      <view class="content">
        <view class="swiperBox">
          <swiper
            class="swiper"
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            indicator-color="#fff"
            indicator-active-color="rgb(175,15,15)"
          >
            <swiper-item
              v-for="(item, index) in list"
              :key="index"
              style="border-radius: 16rpx"
              ><image
                mode="aspectFill"
                class="imgs"
                :src="item"
                style="border-radius: 16rpx; width: 100%; height: 100%"
              ></image
            ></swiper-item>
          </swiper>
        </view>

        <view class="content_between">
          <view class="content_title">
            <view class="content_title_left">
              <text>出境超市</text>
              <text>一站购齐 官方严选 优质保障</text>
            </view>
            <view class="content_title_right">
              <text>更多>></text>
            </view>
          </view>
          <view class="content_con">
            <view
              class="content_con_box"
              v-for="(item, index) in contentConList"
              :key="index"
              :style="{ 'border-right': index == 3 || index == 7 ? 0 : '' }"
            >
              <image :src="'../../static/fontIma/' + item.icon"></image>
              <text>{{ item.name }}</text>
            </view>
          </view>
          <view class="content_bottom">
            <view class="content_bottom_left">
              <text>旅行</text>
              <text>头条</text>
            </view>
            <view class="content_bottom_right">
              <text>~去哪过一个美好的冬天？看看这全球十大雪反对法发电方式</text>
              <text>~去哪过一个美好的冬天？看看这全球十大雪发电方式</text>
            </view>
          </view>
        </view>
      </view>

      <view class="footer">
        <view class="footer_con"> </view>
        <view class="footer_con_sec"> </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getToken } from "@/utils/auth.js";
export default {
  onShow() {
  },
  created() {
	  // 防止小程序未登录获取首页数据
	const token = getToken();
	if (token) {
	    this.$store.dispatch("home/getList", this.list).then((res) => {});
	}
  },
  data() {
    return {
      contentList: [
        {
          icon: "computer.png",
          name: "计算机",
        },
        {
          icon: "list.png",
          name: "记录",
        },
        {
          icon: "position.png",
          name: "定位",
        },
        {
          icon: "gift.png",
          name: "赠送",
        },
        {
          icon: "vip.png",
          name: "会员",
        },
        {
          icon: "luyin.png",
          name: "录音机",
        },
        {
          icon: "phone.png",
          name: "电话",
        },

        {
          icon: "personal.png",
          name: "个人中心",
        },
      ],
      contentConList: [
        {
          icon: "computer.png",
          name: "计算机",
        },
        {
          icon: "list.png",
          name: "记录",
        },
        {
          icon: "position.png",
          name: "定位",
        },
        {
          icon: "gift.png",
          name: "赠送",
        },
        {
          icon: "vip.png",
          name: "会员",
        },
        {
          icon: "luyin.png",
          name: "录音机",
        },
        {
          icon: "vip.png",
          name: "会员",
        },
        {
          icon: "luyin.png",
          name: "录音机",
        },
      ],
      headerSearch: "", // 头部 搜索
      indicatorDots: false, // 是否显示指示点
      autoplay: true,
      interval: 2000, // 切换时隔
      duration: 800, // 滑动时长,
      list: [
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/eb1a3588-d9a2-49c9-b7c9-1f0b0f4b6dc4.jpg",
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/ab29ef8d-d04d-4794-b5ca-aa019e62c59b.jpg",
        "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/ae264fea-ca35-4f63-a0a3-d84607089985.jpg",
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.app {
  width: 750rpx;
  // height: 100%;
  height: 1520rpx;
  padding-top: 0;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: center;
  background-color: #eee;
  background-image: url("/static/images/home_bj.jpg");
  background-repeat: repeat-x;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  // position: relative;
  touch-action: none;

  .content_blank {
    height: 140rpx;
  }
  .headerBox {
    // background-color: rgb(214, 239, 175);
    // opacity: 0.2;
    width: 730rpx;
    height: 120rpx;
    padding-top: 10prx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 26rpx;
    // position: fixed;
    // top: 150rpx;
    // z-index: 5000;
    // background-color: rgb(175,15,15);
    .header_scaner {
      height: 88rpx;
      width: 85rpx;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 13rpx;
      text-align: center;
      justify-content: center;
    }
    .header_search {
      height: 65rpx;
      width: 500rpx;
      border-radius: 50rpx;
      background-color: rgb(210, 78, 61);
      // opacity: 0.7;
      .u-input {
        height: 40rpx;
        border-radius: 50rpx;
        padding-top: 0;
      }
      /deep/ .u-input {
        padding-top: 9rpx !important;
      }
    }
    .header_message {
      height: 88rpx;
      width: 94rpx;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
  }
  .content_box {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: 1210rpx;
    // top: 260rpx;
    // position: fixed;
    overflow: auto;
    // padding-top: 10rpx;
    .content_top {
      margin: 20rpx 0;
      padding-right: 10rpx;
      width: 700rpx;
      height: 330rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      text-align: center;
      background-color: #fff;
      border-radius: 16rpx;
      .content_top_category {
        width: 170rpx;
        height: 164rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        // border-right: 1px solid #eee;
        // border-bottom: 1px solid #eee;
        image {
          width: 75rpx;
          height: 75rpx;
          margin-bottom: 20rpx;
        }
        text {
          font-size: 24rpx;
        }
      }
    }
    .content {
      width: 700rpx;
      height: 740rpx;
      background-color: #fff;
      border-radius: 16rpx;

      .swiperBox {
        width: 700rpx;
        height: 300rpx;
        border-radius: 16rpx;
        .swiper {
          .uni-swiper-wrapper {
            // 指示点整个区域
            top: 280rpx; // 比较原先代码 - 修改后为280rpx
          }

          /deep/ .uni-swiper-dot {
            // 指示点元素默认样式
            width: 18upx !important; //  比较原先代码 - 修改后为18upx
            height: 4upx !important; //  比较原先代码 - 修改后为18upx
          }

          /deep/ .uni-swiper-dot-active {
            // 指示点元素激活（当前选中）状态样式
            // background: #CD9763;
            width: 40upx !important;
            width: 18upx !important; //  比较原先代码 - 修改后为18upx
            height: 4upx !important;
          }

          width: 100%;
          border-radius: 16rpx;
          height: 100%;
          /deep/ .uni-swiper-wrapper {
            border-radius: 16rpx;
          }
          /deep/ uni-swiper-item {
            border-radius: 16rpx;
          }
        }
      }
      .content_between {
        border-top: 1px solid #eee;
        border-radius: 16rpx;
        width: 700rpx;
        height: 420rpx;
        margin-top: 20rpx;
        background-color: #fff;
        .content_title {
          // padding-left: 20rpx;
          // padding-right: 20rpx;
          width: 700rpx;
          height: 100rpx;
          display: flex;
          justify-content: center;
          line-height: 90rpx;
          border-bottom: 1px solid #eee;
          .content_title_left {
            width: 540rpx;
            height: 100%;
            text-align: center;
            text:nth-child(1) {
              font-size: 20px;
              font-weight: 550;
              color: rgb(252, 85, 49);
            }

            text:nth-child(2) {
              margin-left: 20rpx;
              font-size: 13px;
              color: rgb(187, 187, 187);
            }
          }
          .content_title_right {
            width: 150rpx;
            height: 100%;
            text-align: center;
            text {
              color: rgb(175, 15, 15);
              font-size: 28rpx;
              font-weight: 550rpx;
            }
          }
        }
        .content_con {
          width: 700rpx;
          height: 208rpx;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          .content_con_box {
            padding-left: 10rpx;
            display: flex;
            flex-wrap: wrap;
            // justify-content: start;
            align-items: center;
            text-align: center;
            width: 163rpx;
            height: 100rpx;
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
            image {
              width: 40rpx;
              height: 40rpx;
              margin-right: 13rpx;
            }
            text {
              font-size: 26rpx;
            }
          }
        }
        .content_bottom {
          height: 100rpx;
          display: flex;
          justify-content: space-between;
          .content_bottom_left {
            height: 100%;
            width: 188rpx;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text {
              font-size: 40rpx;
              color: rgb(252, 80, 53);
              font-weight: 550;
              font-family: fantasy;
            }
          }
          .content_bottom_right {
            height: 100%;
            width: 570rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            font-size: 26rpx;
            font-weight: 500;
            text {
              margin-top: 10rpx;
              width: 500rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }

    .footer {
      width: 700rpx;
      height: 425rpx;
      margin-top: 20rpx;
      padding-top: 20rpx;
      background-color: #fff;
      display: flex;
      flex-wrap: nowrap;
      border-radius: 16rpx;
      justify-content: center;
      .footer_con {
        width: 420rpx;
        height: 400rpx;
        background-color: #eee;
        border-radius: 16rpx;
        background-image: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/823f3fb9-b9ac-4242-9ff5-b38310579cd1.png");
        background-size: 100%;
        background-repeat: no-repeat;
      }
      .footer_con_sec {
        margin-left: 20rpx;
        width: 240rpx;
        height: 400rpx;
        background-color: #eee;
        border-radius: 15rpx;
        background-image: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0d687337-c160-4c47-80a3-763f80caef40/c65e3ec9-2f89-4a0c-8fc9-5bb9d347d03a.png");
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }
}

.bor_top {
  border-top: 1px solid #eee;
}
.bor_clear {
  border: 0;
}
</style>
